<template>
	<PageWrapper contentFullHeight fixedHeight :contentClass="'flex'">
		<div class="tree h-[calc(100%)] flex-shrink-0">
			<div class="tree-wrap">
				<BasicTree
					:tree-data="deptTree"
					:fieldNames="{ key: 'deptId', title: 'deptName' }"
					@select="onSelectDept"
					v-model:expandedKeys="expandedKeys"
					toolbar
					title="部门列表"
					v-if="deptTree.length"
				>
				</BasicTree>
			</div>
		</div>
		<div class="flex-grow">
			<BasicTable @register="registerTable" :searchInfo="searchInfo">
				<template #beforeTable>
					<div class="pt-3 pb-3">
						<a-button class="mr-5" type="primary" @click="handleCreate">新增</a-button>
					</div>
				</template>
				<template #bodyCell="{ column, record }">
					<!-- <template v-if="column.key == 'roleNameList'">
						<div>{{ record.roleNameList.join() }}</div>
					</template> -->
					<template v-if="column.key == 'action'">
						<TableAction :divider="true" :actions="createActions(record)"></TableAction>
					</template>
				</template>
			</BasicTable>
		</div>
		<AddOrEditModal @register="registerModal" @success="handleSuccess"></AddOrEditModal>
	</PageWrapper>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { PageWrapper, BasicTable, TableAction, BasicTree } from '#/components';
import { useModal, useTable } from '#/hooks';
import { getUserList, deleteUser } from '@/api/sys/account';
import { getDeptTree } from '@/api/sys/dept';
// import { Tree } from 'ant-design-vue';
import type { ActionItem } from '#/types';
import AddOrEditModal from './components/AddOrEditItem.vue';
import { useMessage } from '@/hooks/web/useMessage';

const columns = [
	{
		title: '用户名',
		dataIndex: 'username',
	},
	{
		title: '姓名',
		dataIndex: 'name',
	},
	{
		title: '电话',
		dataIndex: 'mobile',
	},
	{
		title: '角色',
		dataIndex: 'roleName',
	},
	{
		title: '部门',
		dataIndex: 'deptName',
	},
	{
		title: '邮箱',
		dataIndex: 'email',
	},
];

let expandedKeys = ref<number[]>([]);
const deptTree = ref([]);
const searchInfo = reactive<Recordable>({});

const [registerTable, { reload }] = useTable({
	columns,
	rowKey: 'userId',
	api: getUserList,
	useSearchForm: true,
	formConfig: {
		baseColProps: { span: 6 },
		schemas: [
			{
				field: 'username',
				label: '用户名',
				component: 'Input',
			},
			{
				field: 'name',
				label: '姓名',
				component: 'Input',
			},
		],
	},
	actionColumn: {
		title: '操作',
		key: 'action',
		dataIndex: 'action',
		width: 240,
	},
});

const [registerModal, { openModal }] = useModal();

const { createMessage } = useMessage();

getDeptTree().then(data => {
	deptTree.value = data;
	expandedKeys.value = [data[0].deptId];
});

function createActions(record: Recordable): ActionItem[] {
	return [
		{
			title: '编辑',
			onClick: handleEdit.bind(null, record),
			disabled: record.username == 'admin',
		},
		{
			title: '删除',
			ifShow: record.username !== 'admin',
			popConfirm: {
				title: '是否确认删除',
				confirm: handleDelete.bind(null, record),
			},
		},
	];
}

function onSelectDept(selectedKeys: number[]) {
	searchInfo.deptId = selectedKeys[0];
	reload();
}

function handleCreate() {
	openModal(true, {
		isUpdate: false,
	});
}
function handleEdit(record: Recordable) {
	openModal(true, {
		record,
		isUpdate: true,
	});
}

function handleDelete(record: Recordable) {
	deleteUser(record.userId).then(
		() => {
			createMessage.success('删除成功');
			reload();
		},
		err => {
			createMessage.error(err);
		},
	);
}

function handleSuccess() {
	createMessage.success('操作成功');
	reload();
}
</script>
<style lang="less" scoped>
.tree {
	width: 300px;
	border-right: 1px solid #ddd;
	line-height: 45px;
	margin: 0 30px 0 0;
	.tree-wrap {
		width: 270px;
		overflow: auto;
		:deep(.zhoups-basic-title) {
			font-weight: bold;
			font-size: large;
		}
	}
}
</style>
